.container {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* Trigger Button Styles */
.show-popup-btn {
    background-color: #4caf50;
    color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 16px;
}

/* Popup Overlay */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Darkened background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    flex-wrap: wrap;
}

.shrink-animation {
    /* animation: scaleDownArc 0.8s forwards cubic-bezier(0.25, 0.1, 0.25, 1); 使用贝塞尔曲线控制动画 */
    animation: scaleDownArc 0.8s ease-in forwards; /* 使用贝塞尔曲线控制动画 */
}

@keyframes scaleDownArc {
    from {
        left: 50%;
        top: 50%;
        transform: scale(1) translate(-50%, -50%);
        opacity: 1;
    }

    to {
        left: 50%;
        top: 50%;
        transform: scale(0) translate(100%, 100%);
        opacity: 0;
    }
}


.delet-icon {
    position: fixed;
    width: 60rpx;
    height: 60rpx;
    top: 180rpx;
    margin: 0 auto;
}

.delet-icon image {
    width: 100%;
    height: 100%;
}

/* Popup Content */
.popup-content {
    background-image: url('https://td.lszbg.com/public/uploads/h5/home/nwe_user_bg.png');
    background-size: cover;
    height: 1186rpx;
    width: 680rpx;
    top: 0%;
    text-align: center;
    transition: transform 0.5s ease, opacity 0.5s ease; /* Added transition */
    position: relative;
}

.claiming-btn {
    position: absolute;
    background-image: url('https://td.lszbg.com/public/uploads/h5/home/btn.png');
    background-size: cover;
    height: 105rpx;
    width: 422rpx;
    display: flex;
    text-align: center;
    justify-content: center;
    line-height: 105rpx;
    color: #fff;
    bottom: 80rpx;
    left: 50%;
    transform: translateX(-50%);

    /* 新增动画属性 */
    animation: breath 2s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4)); /* 增强呼吸光效 */
}

/* 呼吸动画关键帧 */
@keyframes breath {
    0%, 100% {
        transform: translateX(-50%) scale(0.98); /* 保持水平居中 */
        opacity: 0.9;
    }
    50% {
        transform: translateX(-50%) scale(1.03);
        opacity: 1;
        filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.8)); /* 呼吸峰值时增强光效 */
    }
}

.items-box {
    position: relative;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 560rpx;
    height: 540rpx;
    padding: 30rpx;
    background: #FFF0D1;
    border-radius: 16rpx;
}

.items-box .items {
    background-image: url('https://td.lszbg.com/public/uploads/h5/home/nwe_user_bg_item.png');
    background-size: cover;
    width: 500rpx;
    height: 140rpx;
    position: relative;
}

.items-box .items .left-num {
    color: #FF752F;
    left: 80rpx;
    top: 50%;
    font-size: 33rpx;
    transform: translateY(-50%);
    position: absolute;
}

.items-box .items .right-text {
    color: #fff;
    position: absolute;
    font-size: 33rpx;
    right: 58rpx;
    top: 50%;
    transform: translateY(-50%);
    max-width: 4em; /* 或 4ch（更精准） */
    word-wrap: break-word; /* 允许长单词换行 */
    overflow-wrap: break-word; /* 现代浏览器推荐写法 */
    white-space: normal; /* 确保换行生效 */
}

/* Tilt Shake Animation */
@keyframes tilt-shake-animation {
    0%,
    20% {
        transform: rotate(0deg); /* Start at normal angle */
    }
    30% {
        transform: rotate(-2deg); /* Tilt left */
    }
    40% {
        transform: rotate(2deg); /* Tilt right */
    }
    50% {
        transform: rotate(-2deg); /* Tilt left */
    }
    60% {
        transform: rotate(2deg); /* Tilt right */
    }
    70%,
    100% {
        transform: rotate(0deg); /* Back to normal */
    }
}

/* Animation for shaking */
.tilt-shake-animation {
    animation: tilt-shake-animation 2s ease-in-out infinite;
}

.popup-bind {
    animation: slideInFromRight 0.5s ease-out forwards;
    width: 600rpx;
    height: 886rpx;
    margin: 0 auto;
    position: relative;

}

.popup-moeny {
    position: absolute;
    top: 51%;
    width: 50%;
    z-index: 999;
    align-items: center;
}
.popup-moeny .money-amount .amount{
    font-size: 64rpx;
    font-weight: bold;
    color: #FA642B;
}
.popup-moeny .money-amount .unit{
    font-size: 28rpx;
    font-weight: bold;
    color: #FA642B;
}

/* 定义从右到左滑出的动画 */
@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 定义从左到右小时的动画 */
@keyframes slideOutFromLeft {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

.shrink-animation-bind {
    animation: slideOutFromLeft 0.5s ease-out forwards; /* 使用贝塞尔曲线控制动画 */
}

.delet-icon-bind {
    width: 60rpx;
    height: 60rpx;
    position: fixed;
    bottom: 160rpx;
    z-index: 101;
    margin: 0 auto;
}

.delet-icon-bind image {
    width: 100%;
    height: 100%;
}